<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>群-聊天</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">		
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../fonts/iconfont/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/global.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.imageviewer.css">
		<style>			
			.frien_img img{width: 45px!important;height: 45px!important;border-radius: 100%;}
			.chat-ta-hear div:nth-child(1),.chat-me-hear div:nth-child(1){width: 17%;float: left;}
			.chat-me-hear div:nth-child(1){float:right;}
			/*隐藏*/
			.alert{width: 100%!important;height: 70px;background-color: #eee;}			
			.alert img{max-width: 45px;height: 45px;border-radius: 5px;}					
			#Icons div{width: auto;position:absolute;padding: 0px 15px;text-align: center;}			
			#Icons p{margin-bottom: 0;}
			#Icons i{width: 100%;color: black;}
			.dis{display:none;}
			.iconfont{font-size: 28px;}
			.nav-bar-footer{bottom: 0;position: fixed;right: 0px;left: 0px;}
			.chamber-comment-nav div i {float: left;line-height: 35px;top: 0px;font-size: 1.5em;padding: 0px;color: #aaa;}
			/*表情包收藏*/			
			.Icbtn{width: 100%!important;height: 150px;background-color: #eee;margin-top: 55px;}
			.Icbtn img{width: 40px;height: 40px;margin: 6px;}
			.Icbtn p{bottom: 0;position: absolute;padding: 0px 15px;margin-bottom: 0;display:block;width: 100%;background: white;}
			.Icbtn p i:nth-child(2){margin-left: 10px;color: red;}					
			/*隐藏功能*/
			.me:after {border-left-color:#e85649;}
			.me{padding: 5px 0px 0px 0px!important;background: #e85649;color: white;}
			.me div:nth-child(1){width: 100%;background: #e85649;padding: 0 6px;color: white}			
			.me i{font-size: 35px;padding-top: 20px;}		
			.me p{margin-bottom: 0;color: white;}
			.me h5{padding: 5px 11px;background: white;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;margin-bottom: 0;font-size: 12px;line-height: 18px;}
			/*弹窗*/				
			.mui-popover{background: #e85649;}			
			.mui-popover img{width: 100%;height: 440px;}
			.mui-popover .mui-popover-arrow {position: relative; z-index: 1000;top: -25px;left: 0;overflow: hidden;width: 0px;height: 0px;}\
			/*撤销*/
            .popover{display:none;background-color: rgba(0,0,0,.3);position:fixed;top:0;bottom: 0;right: 0;left: 0;z-index: 99;}
            .mui-btn.mui-btn-block{padding-bottom: 10px;padding-top:10px}
            .mui-btn-block:nth-child(1){border-radius: 5px 5px 0 0;margin-bottom: 0;border:0;border-bottom: 1px solid #CCCCCC;}
            .mui-btn-block:nth-child(2){border:0;border-radius: 0 0 5px 5px;}
            .mui-btn-block:nth-child(3){border-radius: 5px;border:none !important;}
            .btn{display: none;position:fixed;z-index: 99;width:90%;left: 5%;right: 5%;bottom: 20px;}
            .btn>.mui-btn-block{margin-bottom: 0;border-bottom: 1px solid #eee;color: black;}
            .btn>.mui-btn-block:nth-child(5){margin-top: 10px;color:#AAAAAA;}			
			/*红包*/
			.Enve{position: absolute;top: 15%;text-align: center;width: 100%;}
			.Enve a i{position: absolute;top: -35px;right: 12px;color: #f8d856;font-size: 25px;}
			#kai i{position: absolute;top: 250px;right: 35%;font-size: 35px;background: #f8d856;padding: 0;border-radius: 100px;width: 80px;color: black;height: 80px;line-height: 85px;}			
			.Enve img{width: 70px;height: 70px;border-radius: 100px;}
			.Enve h5,.Enve h4,.Enve a {color: #f8d856;}
			.Enve h4{font-size: 15px;padding-top: 50%;}
			.Enve a span{font-size: 14px;margin-top: 45px;display: block;}
			/*发送图片*/
			.Chatimg {background: url(../public/img/4.jpg) no-repeat top left;background-size: 100%;width: 145px!important;height: 170px!important;}		
			.Chatimg:after {border-left-color:#00479c;}
			.circle_pic{max-width: 50px;height: 50px;}
			.send_btn{width: 100% !important;padding: 0 !important;top: 0;right: 10px; height: 34px;z-index: 10;position: absolute;display: none;text-align: center;}
			/*论坛楼层评论底栏*/
			.chamber-comment-nav{background:white;padding: 11px 10px;overflow: hidden;}
			.chamber-comment-nav div:nth-child(1){width: 11%;float: left;padding: 11px 15px;}
			.chamber-comment-nav div:nth-child(1) i{float: left;line-height: 35px;top:0px;font-size: 1.6em;padding: 0px;color: #aaa;}
			.chamber-comment-nav div:nth-child(2){width: 80%;padding: 11px 10px;float: left;}
			.chamber-comment-nav div:nth-child(2) input{border-radius:3px;height: 35px;margin: 0px;border: 1px solid #999;}
			.chamber-comment-nav div:nth-child(3){width: 10%;float: left;padding: 0 15px;}
			.chamber-comment-nav div:nth-child(3) i{float: right;line-height: 35px;top:0px;font-size: 1.5em;padding: 0px;color: #aaa;}
			.chamber-comment-nav div:nth-child(4){width: 10%;float: right;padding: 11px 15px;}
			.chamber-comment-nav div:nth-child(4) i{float: right;line-height: 35px;top:0px;font-size: 1.6em;padding: 0px;color: #aaa;}
			/*与XX聊条*/
			.chat-ta-hear,.chat-me-hear{padding: 1em;overflow: hidden;background: #efeff4;}
			.chat-ta-hear div:nth-child(2),.chat-me-hear div:nth-child(2){padding: .5em .8em;width: auto;max-width: 70%;}
			.chat-ta-hear div:nth-child(2){float:left;left: .7em;}
			.chat-me-hear div:nth-child(2){float:right;right: .6em;}
			.chat-ta,.chat-me{background-color:white;position: relative;border-radius:5px;top: 7px;}
			.chat-ta:after,.chat-ta:before,.chat-me:after,.chat-me:before {border: solid transparent;content: ' ';height: 0;position: absolute;width: 0;}
			.chat-ta:after,.chat-ta:before {right: 100%;}
			.chat-me:after,.chat-me:before {left: 100%;}
			.chat-ta:after,.chat-me:after {border-width:6px;top: 15px;}
			.chat-ta:after {border-right-color:white;}
			.chat-me:after {border-left-color:white;}
		</style>
	</head>
	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorP"></a>
			<h1 class="mui-title colorP">旅行部落</h1>
			<a onclick="openNewPage('user_of_group.html')" class="mui-pull-right"><i class="mui-icon iconfont colorP">&#xe638;</i></a>
		</header>
		<pre id='h'></pre>
		<script id='msg-template' type="text/template">
			<% for(var i in record){ var item=record[i]; %>
				<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
					<% if(item.sender=='self' ) { %>
						<i class="msg-user mui-icon mui-icon-person"></i>
					<% } else { %>
						<img class="msg-user-img" src="../images/logo.jpg" alt="" />
					<% } %>
					<div class="msg-content">
						<div class="msg-content-inner">
							<% if(item.type=='text' ) { %>
								<%=( item.content|| '&nbsp;&nbsp;') %>
							<% } else if(item.type=='image' ) { %>
								<img class="msg-content-image" src="<%=(item.content)%>" style="max-width: 100px;" />
							<% } else if(item.type=='sound' ) { %>
								<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
								<span class="play-state">点击播放</span>
							<% } %>
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
			<% } %>
		</script>
		<footer>			
		   	<nav class="nav-bar nav-bar-footer chamber-comment-nav" style="z-index: 10;padding: 0;">				
				<div><i class="mui-icon mui-icon-plus Envelope"></i></div>
		     	<div><input type="text" class="text_area" id="saytext"/></div>
		     	<div class="mui-input-row" style="position: absolute;top: 11px; right:0px;float: right;">
		     	    <input type="text" class="mui-input-speech mui-input-clear" placeholder="">
		     		<button type="button" class="mui-btn mui-btn-blue send_btn">发送</button>
		     	</div>		     	
		     	<div id="Icons" class="alert dis">
					<div class="Icbtns" style="left: 25%;">
					   	<i class="mui-icon iconfont">&#xe617;</i>
					    <p class="a">表情</p>
					</div>
					<div style="left: 60%;">
					   	<i class="mui-icon iconfont">&#xe60e;</i>
					    <p class="a">图片</p>
					</div>
			    </div>
		    </nav>
		</footer>
		<div class="mui-content" style="padding-bottom: 50px;">
			<ul class="chat_list">
				<!--对方说话-->
				<li class="chat-ta-hear">
					<div class="circle_pic">
						<img src="../img/user4.jpg"/>
					</div>	
					<div class="chat-ta complaints">这个商品如何</div>		
				</li>
				<li class="chat-ta-hear">
					<div class="circle_pic">
						<img src="../img/user8.jpg"/>
					</div>	
					<div class="chat-ta complaints">看起来还不错啦！</div>		
				</li>
				<!--my说话-->
				<li class="chat-me-hear">
					<div class="circle_pic">
						<img src="../img/user1.jpg"/>
					</div>
					<div class="chat-me complaints">要买吗？</div>		
				</li>
			</ul>
		</div>
		<div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<div class="r-sigh">!</div>
			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div>
		<!--撤销-->
		<div class="popover"></div>
		<script type="text/javascript" src="../js/open.js"></script>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/function.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.imageViewer.js"></script>
		<script src="../js/arttmpl.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//消息输入框发送按钮的显示与隐藏
				$('.text_area').focus(function(){
					$(this).css('width','88%');	
					$('.chamber-comment-nav div:nth-child(2) input').css({'border-radius':'3px 0 0 3px'});
					$('.send_btn').css('display','block');
					$('.send_btn').parent().css('width','20%');
				})
				$('.text_area').blur(function(){
					$(this).css('width','100%');
					$('.chamber-comment-nav div:nth-child(2) input').css({'border-radius':'3px'});
					$('.send_btn').css('display','none');
					$('.send_btn').parent().css('width','10%');
				})				
				//获取自己说的话
				$('.send_btn').on('tap',function(){
					var my_val = $('#saytext').val();
					if(my_val != ''){
						$('.chat_list').append("<li class='chat-me-hear'><div class='circle_pic'><img src='../img/user1.jpg'/></div><div class='chat-me complaints'>"+my_val+"</div></li>");
						$('.text_area').val('');
					} else{
						mui.toast('请在输入框输入你想和对方说的话')
						return;
					}

					if($('.chat_list').height() > $('.mui-content').height()){
						var val =  $('.chat_list').height()-$('.mui-content').height();
						$('.chat_list').scrollTop(val);
					}
					//如果对话列表超过mui-content的高度，则进行上浮
					if($('.chat_list').height() > $('.mui-content').height()){
						var val =  $('.chat_list').height()-$('.mui-content').height();
						$('.mui-content').scrollTop(val);
					}				
					return false;
				})
			})
		</script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			$('.complaints').on('tap',function(){
             	$('.popover').show();
             	$('.btn').slideDown()
            });
            $('.off').on('tap',function(){
             	$('.popover').fadeOut();
             	$('.btn').slideUp()
            });
		</script>
		<script type="text/javascript" charset="utf-8">
			(function($, doc) {
				var MIN_SOUND_TIME = 800;
				$.init({
					gestureConfig: {
						tap: true, //默认为true
						doubletap: true, //默认为false
						longtap: true, //默认为false
						swipe: true, //默认为true
						drag: true, //默认为true
						hold: true, //默认为false，不监听
						release: true //默认为false，不监听
					}
				});
				template.config('escape', false);
				//$.plusReady=function(fn){fn();};
				$.plusReady(function() {
					plus.webview.currentWebview().setStyle({
						softinputMode: "adjustResize"
					});
					var showKeyboard = function() {
						if($.os.ios) {
							var webView = plus.webview.currentWebview().nativeInstanceObject();
							webView.plusCallMethod({
								"setKeyboardDisplayRequiresUserAction": false
							});
						} else {
							var Context = plus.android.importClass("android.content.Context");
							var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
							var main = plus.android.runtimeMainActivity();
							var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
							imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
							//var view = ((ViewGroup)main.findViewById(android.R.id.content)).getChildAt(0);
							imm.showSoftInput(main.getWindow().getDecorView(), InputMethodManager.SHOW_IMPLICIT);
							//alert("ll");
						}
					};
					var record = [{
						//						sender: 'zs',
						//						type: 'text',
						//						content: 'Hi，我是 MUI 小管家！'
					}];
					var ui = {
						body: doc.querySelector('body'),
						footer: doc.querySelector('footer'),
						footerRight: doc.querySelector('.footer-right'),
						footerLeft: doc.querySelector('.footer-left'),
						btnMsgType: doc.querySelector('#msg-type'),
						//						boxMsgText: doc.querySelector('#msg-text'),
						//						boxMsgSound: doc.querySelector('#msg-sound'),
						btnMsgImage: doc.querySelector('#msg-image'),
						areaMsgList: doc.querySelector('#msg-list'),
						boxSoundAlert: doc.querySelector('#sound-alert'),
						h: doc.querySelector('#h'),
						content: doc.querySelector('.mui-content')
					};
					ui.h.style.width = ui.boxMsgText.offsetWidth + 'px';
					//alert(ui.boxMsgText.offsetWidth );
					var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;
					var msgItemTap = function(msgItem, event) {
						var msgType = msgItem.getAttribute('msg-type');
						var msgContent = msgItem.getAttribute('msg-content')
						if(msgType == 'sound') {
							player = plus.audio.createPlayer(msgContent);
							var playState = msgItem.querySelector('.play-state');
							playState.innerText = '正在播放...';
							player.play(function() {
								playState.innerText = '点击播放';
							}, function(e) {
								playState.innerText = '点击播放';
							});
						}
					};
					var imageViewer = new $.ImageViewer('.msg-content-image', {
						dbl: false
					});
					var bindMsgList = function() {
						//绑定数据:
						/*tp.bind({
							template: 'msg-template',
							element: 'msg-list',
							model: record
						});*/
						ui.areaMsgList.innerHTML = template('msg-template', {
							"record": record
						});
						var msgItems = ui.areaMsgList.querySelectorAll('.msg-item');
						[].forEach.call(msgItems, function(item, index) {
							item.addEventListener('tap', function(event) {
								msgItemTap(item, event);
							}, false);
						});
						imageViewer.findAllImage();
						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
					};
					bindMsgList();
					window.addEventListener('resize', function() {
						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;
					}, false);
					var send = function(msg) {
						record.push(msg);
						bindMsgList();
						toRobot(msg.content);
					};
					var toRobot = function(info) {
						var apiUrl = 'http://www.tuling123.com/openapi/api';
						$.getJSON(apiUrl, {
							"key": 'acfbca724ea1b5db96d2eef88ce677dc',
							"info": info,
							"userid": plus.device.uuid
						}, function(data) {
							//alert(JSON.stringify(data));
							record.push({
								sender: 'zs',
								type: 'text',
								content: data.text
							});
							bindMsgList();
						});
					};

					function msgTextFocus() {
						ui.boxMsgText.focus();
						setTimeout(function() {
							ui.boxMsgText.focus();
						}, 150);
					}
					//解决长按“发送”按钮，导致键盘关闭的问题；
					ui.footerRight.addEventListener('touchstart', function(event) {
						if(ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
							msgTextFocus();
							event.preventDefault();
						}
					});
					//解决长按“发送”按钮，导致键盘关闭的问题；
					ui.footerRight.addEventListener('touchmove', function(event) {
						if(ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
							msgTextFocus();
							event.preventDefault();
						}
					});
					//					ui.footerRight.addEventListener('touchcancel', function(event) {
					//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
					//							msgTextFocus();
					//							event.preventDefault();
					//						}
					//					});
					//					ui.footerRight.addEventListener('touchend', function(event) {
					//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
					//							msgTextFocus();
					//							event.preventDefault();
					//						}
					//					});
					ui.footerRight.addEventListener('release', function(event) {
						if(ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
							//showKeyboard();
							ui.boxMsgText.focus();
							setTimeout(function() {
								ui.boxMsgText.focus();
							}, 150);
							//							event.detail.gesture.preventDefault();
							send({
								sender: 'self',
								type: 'text',
								content: ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '<br/>')
							});
							ui.boxMsgText.value = '';
							$.trigger(ui.boxMsgText, 'input', null);
						} else if(ui.btnMsgType.classList.contains('mui-icon-mic')) {
							ui.btnMsgType.classList.add('mui-icon-compose');
							ui.btnMsgType.classList.remove('mui-icon-mic');
							ui.boxMsgText.style.display = 'none';
							//							ui.boxMsgSound.style.display = 'block';
							ui.boxMsgText.blur();
							document.body.focus();
						} else if(ui.btnMsgType.classList.contains('mui-icon-compose')) {
							ui.btnMsgType.classList.add('mui-icon-mic');
							ui.btnMsgType.classList.remove('mui-icon-compose');
							//							ui.boxMsgSound.style.display = 'none';
							ui.boxMsgText.style.display = 'block';
							//--
							//showKeyboard();
							ui.boxMsgText.focus();
							setTimeout(function() {
								ui.boxMsgText.focus();
							}, 150);
						}
					}, false);
					ui.footerLeft.addEventListener('tap', function(event) {
						var btnArray = [{
							title: "拍照"
						}, {
							title: "从相册选择"
						}];
						plus.nativeUI.actionSheet({
							title: "选择照片",
							cancel: "取消",
							buttons: btnArray
						}, function(e) {
							var index = e.index;
							switch(index) {
								case 0:
									break;
								case 1:
									var cmr = plus.camera.getCamera();
									cmr.captureImage(function(path) {
										send({
											sender: 'self',
											type: 'image',
											content: "file://" + plus.io.convertLocalFileSystemURL(path)
										});
									}, function(err) {});
									break;
								case 2:
									plus.gallery.pick(function(path) {
										send({
											sender: 'self',
											type: 'image',
											content: path
										});
									}, function(err) {}, null);
									break;
							}
						});
					}, false);
					var setSoundAlertVisable = function(show) {
						if(show) {
							ui.boxSoundAlert.style.display = 'block';
							ui.boxSoundAlert.style.opacity = 1;
						} else {
							ui.boxSoundAlert.style.opacity = 0;
							//fadeOut 完成再真正隐藏
							setTimeout(function() {
								ui.boxSoundAlert.style.display = 'none';
							}, 200);
						}
					};
					var recordCancel = false;
					var recorder = null;
					var audio_tips = document.getElementById("audio_tips");
					var startTimestamp = null;
					var stopTimestamp = null;
					var stopTimer = null;
					ui.body.addEventListener('drag', function(event) {
						//console.log('drag');
						if(Math.abs(event.detail.deltaY) > 50) {
							if(!recordCancel) {
								recordCancel = true;
								if(!audio_tips.classList.contains("cancel")) {
									audio_tips.classList.add("cancel");
								}
								audio_tips.innerHTML = "松开手指，取消发送";
							}
						} else {
							if(recordCancel) {
								recordCancel = false;
								if(audio_tips.classList.contains("cancel")) {
									audio_tips.classList.remove("cancel");
								}
								audio_tips.innerHTML = "手指上划，取消发送";
							}
						}
					}, false);
					ui.boxMsgText.addEventListener('input', function(event) {
						ui.btnMsgType.classList[ui.boxMsgText.value == '' ? 'remove' : 'add']('mui-icon-paperplane');
						ui.btnMsgType.setAttribute("for", ui.boxMsgText.value == '' ? '' : 'msg-text');
						ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '\n-') || '-';
						ui.footer.style.height = (ui.h.offsetHeight + footerPadding) + 'px';
						ui.content.style.paddingBottom = ui.footer.style.height;
					});
					ui.boxMsgText.addEventListener('tap', function(event) {
						ui.boxMsgText.focus();
						setTimeout(function() {
							ui.boxMsgText.focus();
						}, 0);
					}, false);
				});
			}(mui, document));
//			功能
			$('.Envelope').on('tap',function(){
				if($('.alert').hasClass('dis')){
					$('.alert').removeClass('dis');
				}else{
					$('.alert').addClass('dis');
				}
				
			});
//			表情
			$('.Icbtns').on('tap',function(){
				if($('.Icbtn').hasClass('dis')){
					$('.Icbtn').removeClass('dis');
				}else{
					$('.Icbtn').addClass('dis');
				}
			});
			$(".confirmBtn").on('tap', function() {
				$('.mui-popup-backdrop').css('display','block');
				$('.mui-popup-in').css('display','block');
			});
			//输入文字
			$('#saytext').on('click', function() {
				$('.chamber-comment-nav').css('height', '56px');
				$('footer').css('height', '56px');
			})
		</script>
	</body>
</html>